<template>
  <div class="editEmp">
    <el-dialog
              title="修改员工"
              :visible.sync="dialogVisible"
              width="400px"

            >
              <el-form  :data="editfrom">
                <el-form-item label="*账号" :label-width="formLabelWidth">
                  <el-input
                    v-model="editfrom.username"
                    style="width: 200px"
                    placeholder="请输入账号"
                  ></el-input>
                </el-form-item>
                <el-form-item label="*员工姓名" :label-width="formLabelWidth">
                  <el-input
                    v-model="editfrom.name"
                    style="width: 200px"
                    placeholder="请输入员工姓名"
                  ></el-input>
                </el-form-item>

                <el-form-item label="*手机号" :label-width="formLabelWidth">
                  <el-input
                    v-model="editfrom.phone"
                    style="width: 200px"
                    placeholder="请输手机号"
                  ></el-input>
                </el-form-item>

                <el-form-item
                  label="*性别"
                  :label-width="formLabelWidth"
                  style="width: 200px;"

                  >
                  <div  class="radiox" >
                    <el-radio-group v-model="editfrom.sex" v-removeAriaHidden>
                    <el-radio :label="'1'">男</el-radio>
                    <el-radio :label="'2'">女</el-radio>

                  </el-radio-group>

                  </div>
                   </el-form-item>
                   <el-form-item   label="*账号状态" :label-width="formLabelWidth" style="width: 180px">

                  <el-select  v-model="editfrom.status" placeholder="请选择">
                    <el-option  label="启用"  value="1">  </el-option>
                    <el-option label="禁用"  value="0">  </el-option>
                    </el-select>
                   </el-form-item>

                <el-form-item   label="身份证号" :label-width="formLabelWidth" style="width: 280px">

                  <el-input v-model="editfrom.idNumber" placeholder="身份证">

                  </el-input>
                </el-form-item>
                <div style="pediting-top: 10px;width:330px" >

                  <el-button @click="savehandler(editfrom)"
                    style="margin-left: 60px; width: 80px"
                    type="primary"
                    >保存</el-button
                  >
                  <el-button @click="cancel" style="margin-left: 100px; width: 80px" type="info"
                    >取消</el-button
                  >
                </div>
              </el-form>
   </el-dialog>
  </div>
</template>

<script>
import Bus1 from '@/utils/EventBus'
import { query, update } from '@/api/emp'
export default {
  name: 'editempIndex',
  data () {
    return {

      editfrom: {
        id: '',
        username: '',
        status: '',
        name: '',
        phone: '',
        sex: '1',
        idNumber: ''
      }, // 弹窗数据

      fileList: [],
      dialogVisible: false,
      formLabelWidth: '80px',

      deptName: [], // 获取所有部门名称
      index: ''
    }
  },
  created () {
    /* 接收弹窗开关 */
    Bus1.$on('edit', (dialogVisible, id) => {
      if (id !== undefined) {
        this.index = id
        this.dialogVisible = dialogVisible
      }
      this.init(id)
    })
  },
  /* 关闭对话 */
  beforeDestroy () {
    Bus1.$off('edit')
  },
  methods: {
    async savehandler (editfrom) {
      if (editfrom.username === '') {
        this.$message.error('用户名不能为空')
        return
      } if (!(editfrom.username.length > 0 && editfrom.username.length < 20)) {
        this.$message.error('用户名数量不能超过20')
        return
      }
      if (editfrom.phone.length !== 11) {
        this.$message.error('手机号位位数不对')
        return
      }

      if (editfrom.idNumber.length !== 18) {
        this.$message.error('身份证位数不对')
        return
      }

      if (editfrom.status === '启用') {
        editfrom.status = 1
      } if (editfrom.status === '禁用') {
        editfrom.status = 0
      }

      console.log(editfrom, 'editfrom')
      const res = await update(editfrom)

      if (res.code === 1) {
        this.dialogVisible = false
        this.$message.success('恭喜你，修改成功')
      }
      location.reload()// 刷新
    },
    // 根据id查询回显员工
    async init (index) {
      const res = await query(index)
      console.log(res.data)
      this.editfrom = res.data
      if (res.data.status === 1) {
        this.editfrom.status = '启用'
      } else {
        this.editfrom.status = '禁用'
      }
    },

    // 取消
    cancel () {
      this.dialogVisible = false
      this.editfrom = ''
    }

  }

}
</script>

<style lang="less" secped>

  .avatar {
    width: 100px;
    height: 100px;

    display: block;
  }
 /deep/ .el-button.el-button--info{
    margin-left:10%;
}
.radiox{
  padding-left: 8px;
}

</style>
